<template>
	<view class="operation">
		<view class="operationtop">
			<view class="topbox">
				<view class="title">访客</view>
				<view class="righttop">
					<view :class="{ btn1: true, btn2: isWeek == 'm' }" @click="monthweek('m')">按月</view>
					<view :class="{ btn1: true, btn2: isWeek == 'w' }" @click="monthweek('w')">按周</view>
				</view>
			</view>
			<view class="topboxech">
				<echarts type="line" :opts="opts1" :chartData="charts1" />
			</view>
			<view class="topboxbom">
				<view class="bomleft">
					<view class="bltitle">本月访客人数</view>
					<view class="blnum">{{ data1.nowAmount }}</view>
				</view>
				<view class="bomright">
					<view class="bltitle">上月访客人数</view>
					<view class="blnum">{{ data1.beforeAmount }}</view>
				</view>
			</view>
		</view>
		<view class="fangwenxqbox">
			<view class="tiotitle">访问兴趣比</view>
			<view class="chartsbox">
				<view class="charts">
					<echarts type="ring" :opts="opts" :chartData="chsData1" />
				</view>
				<view class="rightbox">
					<view class="ritem">
						<view class="dian color1" />
						<view class="text">感兴趣</view>
						<view class="textnum">{{ data2.interested }}%</view>
					</view>
					<view class="ritem">
						<view class="dian color2" />
						<view class="text">不感兴趣</view>
						<view class="textnum">{{ data2.unInterested }}%</view>
					</view>
				</view>
			</view>
		</view>

		<view class="fangwenxqbox">
			<view class="tiotitle">家长转化率</view>
			<view class="chartsbox">
				<view class="charts">
					<echarts type="ring" :opts="opts" :chartData="chsData2" />
				</view>
				<view class="rightbox">
					<view class="ritem">
						<view class="dian color1" />
						<view class="text">感兴趣并转化</view>
						<view class="textnum">{{ data2.interestedBuy }}%</view>
					</view>
					<view class="ritem">
						<view class="dian color2" />
						<view class="text">感兴趣未转化</view>
						<view class="textnum">{{ data2.interestedNotBuy }}%</view>
					</view>
					<view class="ritem">
						<view class="dian color3" />
						<view class="text">不感兴趣并转化</view>
						<view class="textnum">{{ data2.unInterestedBuy }}%</view>
					</view>
					<view class="ritem">
						<view class="dian color4" />
						<view class="text">不感兴趣未转化</view>
						<view class="textnum">{{ data2.unInterestedNotBuy }}%</view>
					</view>
				</view>
			</view>
		</view>

		<view class="fangwenxqbox">
			<view class="tiotitle">任务完成率</view>
			<view class="righttop posionfg">
				<view :class="{ btn1: true, btn2: isDay == 'm' }" @click="monthDay('m')">按月</view>
				<view :class="{ btn1: true, btn2: isDay == 'd' }" @click="monthDay('d')">按天</view>
			</view>
			<view class="chartsbox">
				<view class="charts">
					<echarts type="ring" :opts="opts" :chartData="chsData3" />
				</view>
				<view class="rightbox">
					<view class="ritem">
						<view class="dian color1" />
						<view class="text">任务完成率</view>
						<view class="textnum">{{ isDay == 'm' ? data2.finishMonthRate || 0 : data2.finishDayRate }}% </view>
					</view>
					<view class="ritem">
						<view class="dian color2" />
						<view class="text">未完成</view>
						<view class="textnum">{{ isDay == 'm' ? data2.unFinishMonthRate || 0 : data2.unFinishDayRate }}% </view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { visitorStat, operateStat } from '@/api/yanxue/user.js'
import echarts from '../components/qiun-data-charts/qiun-data-charts.vue'
export default {
	components: {
		echarts
	},
	data() {
		return {
			isWeek: 'm',
			isDay: 'm',
			charts1: {},
			chsData1: {},
			chsData2: {},
			chsData3: {},
			data2: {},
			data1: {},
			opts1: { legend: { show: false }, color: ['#f8652a'] },
			opts: {
				legend: {
					show: false
				},
				dataLabel: false,
				subtitle: {
					name: ''
				},
				title: {
					name: '',
					color: '#fff'
				},
				color: ['#f95513', '#ffd023', '#a0ff72', '#a47cd4'],
				extra: {
					ring: {
						ringWidth: 20
					}
				}
			}
		}
	},
	created() {
		this.getoperateStat()
		this.getvisitorStat()
	},
	methods: {
		monthweek(type) {
			this.isWeek = type
			this.getvisitorStat()
		},
		monthDay(type) {
			this.isDay = type
			let num1 = type == 'm' ? this.data2.finishMonthRate : this.data2.finishDayRate
			let num2 = type == 'm' ? this.data2.unFinishMonthRate : this.data2.unFinishDayRate
			this.chsData3 = {
				series: [
					{
						data: [
							{ name: '', value: num1 || 0 },
							{ name: '', value: num2 || 0 }
						]
					}
				]
			}
		},
		getvisitorStat() {
			visitorStat({
				type: this.isWeek == 'm' ? 1 : 2
			}).then(res => {
				let data = res.result
				let list1 = []
				let list2 = []
				data.statDataList.map(x => {
					list1.push(x.dateKey)
					list2.push(x.value)
				})
				this.charts1 = {
					categories: list1,
					series: [{ name: '', data: list2 }]
				}
				this.data1 = data
			})
		},
		getoperateStat() {
			operateStat().then(res => {
				let data = res.result
				this.data2 = data
				this.chsData1 = {
					series: [
						{
							data: [
								{
									name: '',
									value: data.interested
								},
								{
									name: '',
									value: data.unInterested
								}
							]
						}
					]
				}
				this.chsData2 = {
					series: [
						{
							data: [
								{
									name: '',
									value: data.interestedBuy
								},
								{
									name: '',
									value: data.interestedNotBuy
								},
								{
									name: '',
									value: data.unInterestedBuy
								},
								{
									name: '',
									value: data.unInterestedNotBuy
								}
							]
						}
					]
				}
				this.monthDay('m')
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.operation {
	width: 750rpx;
	// height: 100vh;
	// overflow: scroll;
	padding: 50rpx 32rpx;

	.operationtop {
		width: 686rpx;
		height: 730rpx;
		background: #ffffff;
		border-radius: 64rpx;
		padding: 48rpx 32rpx;
		margin-bottom: 30rpx;

		.topbox {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				font-family: HarmonyOS Sans SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #111827;
			}
		}

		.topboxech {
			width: 100%;
			height: 400rpx;
			position: relative;
		}

		.topboxbom {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.bomright,
			.bomleft {
				width: 300rpx;
				height: 174rpx;
				background: #fafafa;
				border-radius: 32rpx;

				.bltitle {
					font-family: HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #718096;
					line-height: 32rpx;
					margin: 20rpx 0 40rpx 20rpx;
				}

				.blnum {
					font-family: HarmonyOS Sans SC;
					font-weight: bold;
					font-size: 34rpx;
					color: #111827;
					margin: 20rpx 0 40rpx 20rpx;
				}
			}
		}
	}

	.fangwenxqbox {
		width: 686rpx;
		height: 464rpx;
		background: #ffffff;
		border-radius: 64rpx;
		margin-bottom: 30rpx;
		padding: 48rpx 32rpx;
		position: relative;

		.tiotitle {
			font-family: HarmonyOS Sans SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #111827;
			margin-bottom: 40rpx;
		}

		.posionfg {
			position: absolute;
			top: 35rpx;
			right: 32rpx;
		}

		.chartsbox {
			width: 100%;
			height: 280rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.charts {
				width: 260rpx;
				height: 260rpx;
				position: relative;
			}

			.rightbox {
				height: 280rpx;
				flex: 1;
				margin-left: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.ritem {
					display: flex;
					align-items: center;
					display: flex;
					margin-bottom: 20rpx;

					.dian {
						width: 16rpx;
						height: 16rpx;
						// background: #F95513;
						border-radius: 8rpx;
						margin-right: 10rpx;
					}

					.text {
						flex: 1;
						font-family: HarmonyOS Sans SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #718096;
					}

					.textnum {
						width: 76rpx;
						font-family: HarmonyOS Sans SC;
						font-weight: bold;
						font-size: 24rpx;
						color: #111827;
					}
				}
			}
		}
	}

	.color1 {
		background: #f95513;
	}

	.color2 {
		background: #ffd023;
	}

	.color3 {
		background: #a0ff72;
	}

	.color4 {
		background: #a47cd4;
	}

	.righttop {
		width: 196rpx;
		height: 64rpx;
		background: #f9fafb;
		border-radius: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 3rpx;

		.btn1 {
			width: 96rpx;
			height: 56rpx;
			border-radius: 28rpx;
			line-height: 56rpx;
			text-align: center;
			background: #f9fafb;
			color: #718096;
			border-radius: 28rpx;
		}

		.btn2 {
			background: #ffffff;
			color: #f95513;
			box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(17, 24, 39, 0.04);
		}
	}
}
</style>
